<template>
	<view class="home_container">
		<view class="home_box">
			<view class="top_img_box">
				<image src="/static/img-top.png" mode="widthFix" class="top_img"></image>
			</view>
			<view class="bgc_img_all">
				<view class="bgc_img_box">
					<image :src="bgcImg" mode="" class="bgc_img"></image>
				</view>

				<view class="form_box">
					<view class="form_all">
						<view class="form_img_box">
							<image :src="registerImg" mode="widthFix" class="form_img"></image>
						</view>

						<view class="form_input_box">
							<!-- <view class="input_box">
								<u-input v-model="usernameValue" :border="false" :clearable="false" maxlength="11"
									placeholder="请输入用户名"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view> -->
							<view class="input_box">
								<u-input v-model="phoneValue" type="number" :border="false" :clearable="false"
									maxlength="11" placeholder="请输入手机号"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view>

							<view class="input_code_box">
								<view class="">
									<u-input v-model="codeValue" type="number" :border="false" :clearable="false"
										placeholder="请输入验证码"
										placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
								</view>
								<view class="code_title" @click="sendCodeBtn">
									{{ send ? '获取验证码' : second + 's重新发送' }}
								</view>
							</view>

							<view class="input_box">
								<u-input v-model="passwordValue" :border="false" :clearable="false" placeholder="请输入密码"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view>

							<!-- <view class="input_box">
								<u-input v-model="surePasswordValue" :border="false" :clearable="false"
									placeholder="请确认密码"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view> -->
							<view class="register_btn_box" @click="handlerRegister">
								注 册
							</view>
							<!-- <view class="login_btn_box" @click="handleLogin">
								已有账号 去登录
							</view> -->

							<view class="register_read_box">
								<view class="register_read_all">
									<view class="left_box">
										<image src="/static/icon-checked.png" mode="" class="left_img"></image>
									</view>
									<view class="right_box">
										点击“注册”按钮表示您同意《用户注册协议》《隐私协议》
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Debounce,
		Throttle
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				registerImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668368b7334db_1719888055.png',
				usernameValue: '',
				phoneValue: '',
				codeValue: '',
				passwordValue: '',
				surePasswordValue: '',
				send: true, //验证码按钮状态
				second: 0, //显示倒计时
				s: 60, //默认倒计时
				agentId: '',
				pid: '',
				ppid: '',
				userToken: uni.getStorageSync('h5-token'),
				bgcImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66c697ca62ae9_1724291018.png'
			}
		},
		onLoad(options) {
			// if (this.userToken) {
			// 	uni.switchTab({
			// 		url: '/pages/index/index'
			// 	})
			// } else {
			// 	this.getUrlParam()
			// }
			this.getUrlParam()
		},
		methods: {
			// 去登录
			handleLogin() {
				// uni.redirectTo({
				// 	url: '/pages/login/login'
				// })
				location.href = 'https://saler.jkcae.com/h5/#/pages/login/login'
			},

			// 截取url的参数 start
			getUrlParam() {
				const that = this
				// agent_id
				if (that.getQueryString('agent_id')) {
					if (that.getQueryString('agent_id').search('#') !== -1) {
						this.agentId = that.getQueryString('agent_id').substring(0, that.getQueryString(
							'agent_id').indexOf('#'))
					} else {
						this.agentId = that.getQueryString('agent_id') ? that.getQueryString('agent_id') :
							'';
					}
					uni.setStorageSync('registerAgentId', this.agentId)
				}

				// pid
				if (that.getQueryString('pid')) {
					if (that.getQueryString('pid').search('#') !== -1) {
						this.pid = that.getQueryString('pid').substring(0, that.getQueryString(
							'pid').indexOf('#'))
					} else {
						this.pid = that.getQueryString('pid') ? that.getQueryString('pid') :
							'';
					}
					uni.setStorageSync('registerPid', this.pid)
				}

				// ppid
				if (that.getQueryString('ppid')) {
					if (that.getQueryString('ppid').search('#') !== -1) {
						this.ppid = that.getQueryString('ppid').substring(0, that.getQueryString(
							'pid').indexOf('#'))
					} else {
						this.ppid = that.getQueryString('ppid') ? that.getQueryString('ppid') :
							'';
					}
					uni.setStorageSync('registerPpid', this.ppid)
				}
			},

			// 用正则获取url参数
			getQueryString(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				let url = window.location.href.split('?')[1].match(reg);
				if (url != null) {
					return decodeURI(url[2]) //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
				} else {
					return null
				}
			},

			// 获取验证码接口
			getCode() {
				uni.request({
					url: 'https://saler.jkcae.com/app/fxuserGetSmsCode',
					method: 'POST',
					data: {
						phone: this.phoneValue
					},
					success: res => {
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 注册接口
			getRegister() {
				const that = this
				uni.request({
					url: 'https://saler.jkcae.com/app/fxuserRegisterPassword',
					method: 'POST',
					data: {
						// username: this.usernameValue,
						phone: this.phoneValue,
						password: this.passwordValue,
						code: this.codeValue,
						agent_id: this.agentId ? this.agentId : agentId,
						pid: this.pid ? this.pid : pid,
						ppid: this.ppid ? this.ppid : ppid
					},
					success: res => {
						if (res.data.code == 1) {
							uni.setStorageSync('h5-token', res.data.data.token)
							uni.setStorageSync('userInfo', res.data.data.userInfo)
							uni.showToast({
								title: '注册成功',
								icon: 'none',
								success: res => {
									setTimeout(() => {
										this.phoneValue = ''
										this.codeValue = ''
										this.passwordValue = ''
										// this.surePasswordValue = ''
										uni.switchTab({
											url: '/pages/index/index'
										})
									}, 1200)

								}
							})

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			//验证码按钮点击
			sendCodeBtn() {
				let that = this;
				//防连点
				if (!that.send) {
					return false
				}
				this.send = false;
				that.time();
				if (this.phoneValue == '') {
					this.second = this.s
					uni.showToast({
						title: "手机号不能为空",
						icon: "none",
					})
					return;
				} else {
					that.getCode()
				}
			},

			//倒计时
			time() {
				let that = this;
				that.second = that.s;
				let interval = setInterval(() => {
					if (that.second == 1) {
						that.send = true;
						that.second = that.s;
						clearInterval(interval)
					} else {
						that.second--
					}
				}, 1000)
			},

			// 注册
			handlerRegister: Throttle(function() {
				// if (this.usernameValue == '') {
				// 	uni.showToast({
				// 		title: '请输入用户名',
				// 		icon: 'none'
				// 	})
				// 	return
				// } else 
				if (this.phoneValue == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (this.codeValue == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				} else if (this.passwordValue == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				} else if (this.passwordValue.length < 6) {
					uni.showToast({
						title: '密码不可以少于6位',
						icon: 'none'
					})
					return
				}
				//  else if (this.surePasswordValue == '') {
				// 	uni.showToast({
				// 		title: '请确认密码',
				// 		icon: 'none'
				// 	})
				// 	return
				// } else if (this.surePasswordValue.length < 6) {
				// 	uni.showToast({
				// 		title: '确认密码不可以少于6位',
				// 		icon: 'none'
				// 	})
				// 	return
				// }


				// if (this.passwordValue != this.surePasswordValue) {
				// 	uni.showToast({
				// 		title: '两次输入的密码不一致',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.getRegister()
			}, 5000)
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #9acffc;
	}

	.home_container {

		.home_box {

			.top_img_box {
				width: 100%;

				.top_img {
					width: 100%;
					height: 100%;
				}
			}

			.bgc_img_all {
				padding-bottom: 30rpx;

				.bgc_img_box {
					width: 100%;

					.bgc_img {
						width: 100%;
						height: 100%;
					}
				}

				.form_box {
					position: relative;
					display: flex;
					justify-content: center;

					.form_all {
						// width: 619rpx;
						// height: 685rpx;
						background: #FFFFFF;
						box-shadow: 0px 2rpx 9rpx 0px rgba(66, 158, 238, 0.72);
						border-radius: 12rpx;
						padding: 0 30rpx 30rpx;

						.form_img_box {
							position: absolute;
							top: -34rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 326rpx;
							height: 66rpx;

							.form_img {
								width: 100%;
								height: 100%;
							}
						}

						.form_input_box {
							display: flex;
							flex-direction: column;
							margin-top: 67rpx;

							.input_box {
								width: 560rpx;
								height: 68rpx;
								background: #F5F5F5;
								border: 1px solid #F5F5F5;
								border-radius: 34rpx;
								padding-left: 40rpx;
								margin-bottom: 37rpx;
							}

							.input_code_box {
								display: flex;
								align-items: center;
								justify-content: space-between;
								width: 560rpx;
								height: 68rpx;
								background: #F5F5F5;
								border: 1px solid #F5F5F5;
								border-radius: 34rpx;
								padding: 0 30rpx 0 40rpx;
								margin-bottom: 37rpx;

								.code_title {
									font-size: 22rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #499AFF;
								}
							}

							.register_btn_box {
								width: 560rpx;
								height: 70rpx;
								background: linear-gradient(185deg, #F4271C, #FB8377);
								border-radius: 35rpx;
								font-size: 34rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #FFFFFF;
								text-align: center;
								line-height: 70rpx;
							}

							.login_btn_box {
								width: 560rpx;
								height: 70rpx;
								background: linear-gradient(185deg, #3C91FF, #B5E5FE);
								border-radius: 35rpx;
								font-size: 34rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #FFFFFF;
								text-align: center;
								line-height: 70rpx;
								margin-top: 30rpx;
							}

							.register_read_box {
								width: 471rpx;
								padding-top: 30rpx;

								.register_read_all {
									display: flex;

									.left_box {
										width: 30rpx;
										height: 30rpx;
										margin-right: 16rpx;

										.left_img {
											width: 100%;
											height: 100%;
										}
									}

									.right_box {
										width: 90%;
										font-size: 21rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #499AFF;
									}
								}


							}
						}
					}
				}
			}
		}
	}
</style>